<template>
  <div class="home-buy-form-box">
    <div class="buy-table">
      <div class="table-th-row">
        <div class="table-th select">已选择</div>
        <div class="table-th name">服务名称</div>
        <div class="table-th price">价格</div>
        <div class="table-th time">年限</div>
      </div>
      <div
        class="table-td-row"
        v-for="(item, index) in tableList"
        :key="index + '-td'"
        @click="activeId = item.id + ''"
      >
        <div class="table-td select">
          <img
            src="@/assets/image/check-home-buy-active.png"
            v-if="item.id == activeId"
            class="check"
            alt=""
          />
          <img
            src="@/assets/image/check-home-buy.png"
            class="check-no"
            v-else
            alt=""
          />
        </div>
        <div class="table-td name">{{ item.name }}</div>
        <div class="table-td price">
          <span class="price-unit">￥</span>
          <span class="price"> {{ item.price }}</span>
          <span class="price-unit">/年</span>
        </div>
        <div class="table-td time">
          <div class="number-box" v-if="item.id == activeId">
            <div class="reduce">-</div>
            <div class="number">{{ item.time }}年</div>
            <div class="add">+</div>
          </div>
          <div class="number-text" v-else>{{ item.time }}年</div>
        </div>
      </div>
    </div>
    <div class="buy-tips">为方便我们联系您，请留下您的联系方式：</div>
    <div class="form-input-content">
      <div class="form-input">
        <input
          class="input"
          type="text"
          v-model="formData.contact"
          placeholder="姓名称呼"
        />
      </div>
      <div class="form-input">
        <input
          class="input"
          type="text"
          v-model="formData.mobile"
          placeholder="您的手机号或座机"
        />
      </div>
    </div>
    <div class="btn-box">
      <div class="btn-flex">
        <com-button
          radius="radius-small"
          class="btn-com"
          type="primary"
          size="small"
          @click="sublintClick"
          >立即购买</com-button
        >
      </div>
      <div class="btn-flex btn-flex-clear">
        <div class="btn-clear" @click="clear">再想想</div>
      </div>
    </div>
    <div class="buy-other">
      <div class="btn-clear" @click="clear">再想想</div>
      <div class="clear-tips">*未签订合同前可全额退款</div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { withDefaults, defineProps, ref, reactive, computed, watch } from "vue";
import comButton from "@/components/com-button/com-button.vue";
import type { BuyVersion } from "@/views/home/components/buy-version/types";

interface Props {
  /**头部提示 */
  titleTop: string;
  /**标题 */
  title: string;
  /**标题提示 */
  titleTips?: string;

  list?: BuyVersion[];

  active: number | string;
}
interface Events {
  (
    e: "on-sublint",
    value: {
      contact: string;
      mobile: string;
      productId: string | number;
      amount: number;
    }
  ): void;
  (e: "on-clear"): void;
}
const emits = defineEmits<Events>();
const props = withDefaults(defineProps<Props>(), {
  titleTop: "",
  title: "",
  titleTips: "",
  active: "",
});

watch(props, () => {
  console.log(props);
  activeId.value = props.active;
});

const activeId = ref<string | number>("1");
const tableList = computed(() => {
  if (props.list && props.list.length > 0) {
    return props.list.map((item: BuyVersion) => {
      item.time = 1;
      return item;
    });
  } else {
    return [
      { name: "IT运维支持-省心版", price: 298, time: 1, id: "1" },
      { name: "IT运维支持-无忧版", price: 960, time: 1, id: "2" },
      { name: "IT运维支持-专家版", price: 1280, time: 1, id: "3" },
    ];
  }
});

const formData = reactive({
  contact: "",
  mobile: "",
});

const clear = () => {
  emits("on-clear");
};
const sublintClick = () => {
  var pattern = /^1[3-9]\d{9}$/;

  if (formData.contact === "") {
    alert("请输入名称");
  } else if (formData.mobile === "") {
    alert("请输入电话");
  } else if (!pattern.test(formData.mobile)) {
    alert("请输入正确的电话");
  } else {
    let data = tableList.value.filter((item: any) => {
      return item.id == activeId.value;
    });

    emits("on-sublint", {
      contact: formData.contact,
      mobile: formData.mobile,
      productId: activeId.value,
      amount: data[0] && data[0].time ? data[0].time : 1,
    });
  }
};
</script>

<style lang="less">
@import "@/style/var.less";
@import "./index.less";
</style>
